<template>
    <div class="header">
        <div class="header-handle">
            <a class="iconfont icon-fanhui" @click="leftControlHandler()"></a>
        </div>
        <div class="header-title">{{ title }}</div>
        <div class="header-handle"></div>
    </div>
</template>

<script>
    export default {
        name: "m-header",
        props: {
            title: String
        },
        methods: {
            //左边控制的方法
            leftControlHandler() {
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped lang="scss">
    .header{
        padding: .2rem;
        position: sticky;
        top:0;
        background: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        .header-handle{
            flex: 1;
            -webkit-flex: 1;
        }
        .header-title{
            font-size: .3rem;
            color: #666;
            text-align: center;
            max-width: 70%;
            text-overflow: ellipsis;
            overflow: hidden;
            word-wrap: normal;
            white-space: nowrap;
        }
    }
</style>